<ui:composition xmlns="http://www.w3.org/1999/xhtml"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.org/ui"
        template="template.xhtml">
    <ui:define name="title">#{episodeBean.show.name}</ui:define>
    <ui:define name="content">
        <div class="content ui-widget ui-widget-content ui-corner-all">
            <h:form>
                <p><h:commandLink value="Back to shows" action="listShows?faces-redirect=true" /></p>
                
                <p style="text-align: right">
                    <p:commandButton value="Delete show" action="#{episodeBean.deleteShow}">
                        <p:confirm header="Warning" message="Are you sure you wish to delete the show '#{episodeBean.show.name}'?" icon="ui-icon-alert" />
                    </p:commandButton>
                </p>
                
                <p:confirmDialog global="true">
                    <p:commandButton value="Delete" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
                    <p:commandButton value="Cancel" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
                </p:confirmDialog>
                
	            <h:dataTable value="#{episodeBean.show.episodes}" var="episode" rules="all"
	                   rendered="#{not empty episodeBean.show.episodes}"
                    styleClass="boxed" width="100%"
                    headerClasses="name,info,date,status,actions"
                    columnClasses="name,info,date,status,actions"
                    rowClasses="odd,even">
	                <h:column>
	                    <f:facet name="header">Name</f:facet>
	                    <h:outputText value="#{episode}" />
	                </h:column>
                    <h:column>
                        <f:facet name="header">Info</f:facet>
                        <h:outputLink value="#{episode.link}" target="_new">Info</h:outputLink>  
                    </h:column>
                    <h:column>
                        <f:facet name="header">Air date</f:facet>
                        <h:outputText value="#{episode.airDate}">
                            <f:convertDateTime pattern="MMM d, yyyy" />
                        </h:outputText>
                    </h:column>
                    <h:column>
                        <f:facet name="header">Status</f:facet>
                        <h:outputText value="#{episode.status.name}" />
                    </h:column>
                    <h:column>
                        <f:facet name="header">Actions</f:facet>
                        <h:commandButton value="Download" action="#{episodeBean.download(episode)}"
                                class="action" rendered="#{episode.status == 'NEW'}" />
                        <h:commandButton value="Watched" action="#{episodeBean.setWatched(episode)}"
                                class="action" rendered="#{episode.status == 'DOWNLOADED'}">
                            <f:ajax render="@form" />
                        </h:commandButton>
                        <h:commandLink value="Re-download" action="#{episodeBean.download(episode)}"
                                class="action" rendered="#{episode.status == 'DOWNLOADED'}">
                            <f:ajax render="@form" />
                        </h:commandLink>
                        <h:commandLink value="Reset" action="#{episodeBean.reset(episode)}"
                                class="action" rendered="#{episode.status == 'WATCHED'}">
                            <f:ajax render="@form" />
                        </h:commandLink>
                    </h:column>
	            </h:dataTable>
	            
	            <h:outputText value="No episodes found." rendered="#{empty episodeBean.show.episodes}" />
            </h:form>            
        </div>
    </ui:define>
</ui:composition>
